<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表、表单、新元素</title>
	</head>
	<body>
		<h1>列表元素  集合：一组相同的数据</h1>
		<!-- 第一种使用方法：无序列表  使用率高，网络优化 有利于SEO优化-->
		<ul>
			<li>哪吒</li>
			<li>白雪公主</li>
			<li>熊出没</li>
		</ul>
		<!-- 第二种使用方法：有序列表 -->
		<ol>
			<li>大头儿子和小头爸爸</li>
			<li>邋遢大王</li>
			<li>喜羊羊</li>	
		</ol>
		<!-- 第三种使用方法：定义列表 解释小图片-->
		<dl>
			<dt><img src="img/1.png"></dt>
			<dd>这是喜羊羊</dd>
		</dl>
		
		<h1>表单元素</h1>
		<!-- 采集用户信息，账户登录、颜色、功能型的操作 -->
		<form>
		账号：<input type="text" >
		密码：<input type="password" >
		<button>按钮</button>
		<input type="submit">
		<input type="reset">
		男 <input type="radio" name="sex">   <!--(单选框)-->
		女 <input type="radio" name="sex">
		肉 <input type="checkbox">   <!-- 多选框-->
		菜 <input type="checkbox">
		汤 <input type="checkbox">
		</form>
		
		<h1>新元素</h1>
		lorem<mark>lorems</mark>  <!-- 记号笔-->
		<meter value="90" max="100" min="1"></meter>  <!-- 度量元素：默认0-1-->
		<!-- 细节元素 -->
		<details>
			<summary>默认显示的效果</summary>
			<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo dignissimos accusantium aperiam, consequuntur modi ratione rem sunt mollitia ullam, hic reiciendis exercitationem distinctio saepe deserunt velit laudantium et eum corrupti!  Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, cupiditate blanditiis a sequi et inventore ipsa nam, eveniet dolorum saepe eaque delectus id repellendus commodi. Eveniet voluptatibus veniam qui provident.  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, et ipsam! Corrupti debitis mollitia quos fugit unde, magni facilis libero eaque, ad soluta minima aliquam, alias repudiandae pariatur quaerat sed?</div>
			
		</details>
	</body>
</html>